<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="aplus-terminal" content="1"/>
		<meta name="keywords" content="SHOPDZ" />
		<meta name="apple-mobile-web-app-title" content="SHOPDZ"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
		<title>结算页面</title>
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/common.css" />
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	</head>
	<body>
		<!--wrapper开始-->
		<div class="wrapper" style="background: #f7f7f7;">
			<!--header开始-->
			<div class="header-box">
				<div class="index-header">
					<img src="img/logo.png" class="logo"/>
					<a href="mine.html" class="mine-span"><img src="img/mine.png" class="mine-img"/></a>
					<a href="shopCart.html" class="shop-cart"><img src="img/cart.png" class="shop-cart-img"/><img src="img/redPoint.png" class="shop-cart-have"/></a>
				</div>
			</div>
			<!--header结束-->
			<!--content开始-->
			<div class="content">
				<!--收货信息-->
				<div class="address-bg"></div>
				<div class="address-box">
					<div class="address-name">
						<p class="name2">顾单新单新</p>
						<span class="default">默认</span>
					</div>
					<div class="address-describe">
						<p class="phone1">135****5426</p>
						<p class="address-word">北京市海淀区上地三街金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦B1107</p>
					</div>
					<div class="jt-r2"><img src="img/jt-r.png" class="address-choice-btn"/></div>
				</div>
				<!--优惠券-->
				<div class="coupon">
					<p class="coupon-choice">请选择优惠券</p>
					<div class="jt-r2"><img src="img/jt-r.png"/></div>
				</div>
				<!--发票-->
				<div class="invoice">
					<p class="invoice-choice">发票</p>
					<p class="invoice-det">
						<span>纸质发票-个人</span><br />
						<span>非图书商品-明细</span>
					</p>
					<div class="jt-r2"><img src="img/jt-r.png"/></div>
				</div>
				<!--合计/运费/优惠-->
				<div class="order-detail">
					<ul class="order-ul">
						<li>
							<p class="left">商品合计</p>
							<span class="right wordred">699.00</span><span class="right wordred">¥</span>
						</li>
						<li>
							<p class="left">运费<span>（满149元包邮）</span></p>
							<span class="right wordred">699.00</span><span class="right wordred">¥</span>
						</li>
						<li>
							<p class="left">优惠</p>
							<span class="right wordred">699.00</span><span class="right wordred">¥</span>
						</li>
						<li>
							<p class="left">我同意《严选平台服务协议》</p>
							<div class="right order-checkbox check-box">
			    				<input type="checkbox" class="input_check" checked="">
			    				<label for=""></label>
			    			</div>
						</li>
					</ul>
				</div>
				
				<ul class="order-list">
					<li>
						<dl class="order-dl1">
							<dt class="left"><img src="img/cart-img.png" class="img-bg"/></dt>
							<dd class="right">
								<p class="tit-p1" style="margin-top: 2.5rem;"><span class="left">全棉针织条纹四件套 床笠款</span><span class="right"><span>X</span><span>1</span></span></p>
								<p class="tit-p1"><span class="left"><span>1.5米</span><span>水蓝条纹</span></span><span class="right"><span>¥</span><span>299.00</span></span></p>
							</dd>
						</dl>
					</li>
					<li>
						<dl class="order-dl1">
							<dt class="left"><img src="img/cart-img.png" class="img-bg"/></dt>
							<dd class="right">
								<p class="tit-p1" style="margin-top: 2.5rem;"><span class="left">全棉针织条纹四件套 床笠款</span><span class="right"><span>X</span><span>1</span></span></p>
								<p class="tit-p1"><span class="left"><span>1.5米</span><span>水蓝条纹</span></span><span class="right"><span>¥</span><span>299.00</span></span></p>
							</dd>
						</dl>
					</li>
					<li>
						<dl class="order-dl1">
							<dt class="left"><img src="img/cart-img.png" class="img-bg"/></dt>
							<dd class="right">
								<p class="tit-p1" style="margin-top: 2.5rem;"><span class="left">全棉针织条纹四件套 床笠款</span><span class="right"><span>X</span><span>1</span></span></p>
								<p class="tit-p1"><span class="left"><span>1.5米</span><span>水蓝条纹</span></span><span class="right"><span>¥</span><span>299.00</span></span></p>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
			<!--content结束-->
			<div class="order-foot foot-fixed foot-btn">
				<div class="left order-num" style="width: 75%;">
					<span style="padding-left: 5%;">实付：</span><span class="wordred">¥</span><span class="wordred">662.</span><span class="wordred">00</span>
				</div>
				<div class="right settlement">付款</div>
			</div>
		</div>
		<!--wrapper结束-->
		<!--收货地址选择及编辑-->
		<!--收货地址列表开始-->
		<div class="address-choice" style="background: #f7f7f7;">
			<div class="address-bg"></div>
			<ul class="choice-ul2">
				<li class="border-redleft">
					<div class="address-box2 border-bot marginB-no">
						<div class="address-name">
							<p class="name2">顾单新单新</p>
							<span class="default">默认</span>
						</div>
						<div class="address-describe address-describe2" style="width: 63%;">
							<p class="phone1">135****5426</p>
							<p class="address-word">北京市海淀区上地三街金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦B1107</p>
						</div>
						<div class="jt-r2" style="right: 2.5rem;"><img src="img/address-edit.png" class="address-edit"/></div>
					</div>
				</li>
				<li>
					<div class="address-box2 border-bot marginB-no">
						<div class="address-name">
							<p class="name2">顾单新单新</p>
						</div>
						<div class="address-describe address-describe2" style="width: 63%;">
							<p class="phone1">135****5426</p>
							<p class="address-word">北京市海淀区上地三街金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦金隅嘉华大厦B1107</p>
						</div>
						<div class="jt-r2" style="right: 2.5rem;"><img src="img/address-edit.png" class="address-edit"/></div>
					</div>
				</li>
			</ul>
			<div class="new-build foot-fixed foot-btn">新建</div>
		</div>
		<!--收货地址列表结束-->	
			
		<!--收货地址编辑开始-->
		<div class="address-edit-page">
			<ul class="address-edit-ul">
				<li><input type="text" placeholder="收件人姓名" class="input-com1" id="address-name"/></li>
				<li><input type="text" placeholder="手机号码" class="input-com1" id="address-phone"/></li>
				<li class="posi1">
					<select class="area1">
						<option>请选择省</option>
						<option>北京</option>
						<option>上海</option>
						<option>天津</option>
						<option>河南</option>
						<option>河北</option>
					</select>
					<img src="img/jt-r.png" class="area-choice"/>
				</li>
				<li class="posi1">
					<select class="area1">
						<option>请选择市</option>
						<option>北京市</option>
					</select>
					<img src="img/jt-r.png" class="area-choice"/>
				</li>
				<li class="posi1">
					<select class="area1">
						<option>请选择区</option>
						<option>北京</option>
						<option>海淀区</option>
						<option>昌平区</option>
						<option>顺义区</option>
						<option>大兴区</option>
						<option>大兴区</option>
						<option>大兴区</option>
						<option>大兴区</option>
						<option>大兴区</option>
						<option>大兴区</option>
						<option>大兴区</option>
						<option>大兴区</option>
						<option>大兴区</option>
					</select>
					<img src="img/jt-r.png" class="area-choice"/>
				</li>
				<li><input type="text" placeholder="详细地址" class="input-com1" id="address-word"/></li>
			</ul>
			<div class="address-default">
				<div class="check-box address-check">
    				<!--<input type="checkbox" checked="checked" class="check-ps"/>
    				<span class="check-bg"></span>-->
    				<input type="checkbox" class="input_check" checked="">
    				<label for=""></label>
    			</div>
				<span class="remind4">设为默认地址</span>
			</div>
			<div class="address-foot foot-fixed foot-btn">
				<span class="cancelbtn2 left">取消</span>
				<span class="surebtn2 left">保存</span>
			</div>
			<div id="address-remind" class="address-remind">
				
			</div>
		</div>
		<!--收货地址编辑结束-->	
		
		<div class="invoice-details">
			<ul class="address-edit-ul">
				<li><input type="text" placeholder="发票抬头（个人或单位）" class="input-com1 invoice-inp"/></li>
				<li>发票内容：明细</li>
			</ul>
			<div class="invoice-foot foot-fixed foot-btn">
				<span class="invoice-cancelbtn left">取消</span>
				<span class="invoice-surebtn left">保存</span>
			</div>
		</div>
		<script type="text/javascript" src="js/common.js"></script>	
		<script type="text/javascript">
			$(function(){
				$('.address-box').bind('click',function(){
					$('.wrapper').hide();
					$('.address-choice').show();
				});
				//点击发票
				$(".invoice").bind('click',function(){
					$('.wrapper').hide();
					$('.invoice-details').show();
				})
				$(".invoice-cancelbtn,.invoice-surebtn").bind('click',function(){
					$('.wrapper').show();
					$('.invoice-details').hide();
				})	
				//点击新建详细信息编辑页面显示
				$('.new-build').bind('click',function(){
					$('.address-choice').hide();
					$('.address-edit-page').show();
				})
				$('.address-edit').bind('click',function(){
					//alert('s')
					$('.address-choice').hide();
					$('.choice-ul2').hide();
					$('.address-bg').hide();
					$('.address-edit-page').show();

				})
				$('.address-describe2').bind('click',function(){
					$(this).parents('li').addClass('border-redleft').siblings().removeClass('border-redleft');
					$('.wrapper').show();
					$('.address-choice').hide();
					event.stopPropagation();
				});
				$('.cancelbtn2').bind('click',function(){
					$('.address-choice').show();
					$('.choice-ul2').show();
					$('.address-edit-page').hide();
				})
				
				
				//判断收货信息编辑页面手机号输入是否正确
				//判断收货信息编辑页面信息输入是否正确
				$('.surebtn2').click(function(){
					judge($("#address-name"),$("#address-phone"),$("#address-word"),$('#address-remind'));
					$('.address-remind').fadeIn().delay(2000).fadeOut(0);
					//$('.choice-ul2').show();
					//$('.address-choice').show();
					//$('.address-edit-page').hide();

				});
				$('.new-build').bind('click',function(){
					$('.address-choice').css('display','none');
					$('.address-edit-page').css('display','block');
				})
				
				
				//判断手机号和验证码信息是否有误
				function judge(name,phone,code,error){
					var name1 = name.val();
					var phone1 = phone.val();
					var pword1 = code.val();
					var regexName=/^(13[0-9]|14[5|7]|15[0-9]|17[0-9]|18[0-9])\d{8}$/,
						regexPas=/^\d{6}$/;
					if(name1==""){
						error.fadeIn();
						error.text("请输入收件人姓名！");
						return ;
					}
					if(phone1==""){
						error.fadeIn();
						error.text("请输入手机号！");
						return ;
						
					}else if(!regexName.test(phone1)){
						 error.fadeIn();
						 error.text("输入的手机号不正确！");
						 return ;
					} 
					
					if(pword1==''){
						error.fadeIn();
						error.text("请输入详细地址！");
						return ;
					}
					if(!pword1==''){
						$('#address-remind').hide();
						$('.address-edit-page').hide();
						$('.address-choice,.choice-ul2,.address-bg').show();
						return;
					}
					
				}
				
				
				
				
			})
		</script>
	</body>
</html>
